<!-- 令牌出售 -->
<template>
  <div class="pag" >
      <cube-popup type="my-popup" class="my-popup" ref="exchange-active" maskClosable v-show="showExchange">
          <div class="active-ct">
              <div class="content">
                  <div class="yta-modal" style="background:#fff;">
                      <h2><strong>请在<em> {{countdown}}s </em>内完成交易</strong><span>{{currentTime}}</span></h2>
                      <h4>
                        <span>1CVNT<br/><em> ≈ {{cvntPrice}}</em><i> USDT</i></span>
                        <span>1YTA<br/><em> ≈ {{ytaPrice}}</em><i> USDT</i></span></h4>
                      <p>1CVNT ≈ {{xNumber}}YTA<img src="~assets/images/yta/discount.png" alt=""></p>
                      <h5><span>您共有CVNT<em> {{balance}}</em></span><span>共可兑换YTA<em> {{to_yta}}</em></span></h5>
                      <h6>
                        <span><input type="number" placeholder="请输入CVNT数量" v-model="cvntNumber" /><em>CVNT</em></span>
                        <strong @click="putAllIn">全部兑换</strong>
                      </h6>
                      <h1>您将获得
                        <!--<span v-if="cvntNumber && Number(cvntNumber) > 0">{{(Number(cvntNumber) * xNumber / 0.9).toFixed(5)}}</span>-->
                        <span v-if="cvntNumber && Number(cvntNumber) > 0">{{(Number(cvntNumber) * xNumber * 1.1).toFixed(4)}}</span>
                        <span v-else>--</span>
                        YTA</h1>
                  </div>
              </div>
              <div class="submit-btn">
                  <span @click="confirmExchange">兑换</span>
                  <span @click="cancelExchange">再想想</span>
              </div>
          </div>
      </cube-popup>
      <div class="top-info">
          <div class="token-title">
              <h4>您的YTA地址为
                  <img v-if="status == 0" src="~assets/images/yta/checking.png" alt="">
                  <img v-if="status == 1" src="~assets/images/yta/effective.png" alt="">
                  <img v-if="status == 2" src="~assets/images/yta/ng.png" alt="">
              </h4>
              <p>{{ytaAddress}}</p>
              <h5 @click="goChangeAddress">更换YTA地址</h5>
          </div>
      </div>
      <div class="today-price">
          <h3><strong>今日币价</strong><span>{{currentTime}}</span></h3>
          <h4>
              <span>1CVNT<br/><em> ≈ {{cvntPrice}}</em> <i>USDT</i></span>
              <span>1YTA<br/><em> ≈ {{ytaPrice}}</em> <i>USDT</i></span>
          </h4>
          <h5>
              <strong>1CVNT ≈ {{xNumber}}YTA<img src="~assets/images/yta/discount.png" alt=""></strong>
              <span @click="openExchangeModal" :class="{'unable-btn': status != 1}">兑换</span>
          </h5>
      </div>
      <div class="scroll-area">
          <h3 class="third-party"><span>&nbsp;</span>兑换记录</h3>
          <div class="queue-title">
              <div>时间</div>
              <div>支付CVNT</div>
              <div>应得YTA</div>
              <div>状态</div>
          </div>
          <div class="code-content">
              <div class="no-result-wrapper" v-show="offerList && offerList.length == 0">
                  <h2 class="no-result">
                      <img src="~assets/images/miningBoard/unstarted.png" alt="">
                      暂无明细
                  </h2>
              </div>
              <div class="scroll-list-wrap" v-show="offerList && offerList.length > 0">
                  <cube-scroll ref="scroll1" :data="offerList" :options="options" @pulling-up="onPullingUp">
                      <div class="code-item" v-for="(item, index) in offerList"><!-- @click="checkDetail(item.list_id, index, offerList)"-->
                          <div class="detail">
                              <div>
                                  <p>{{item.create_time.split(/[T+]/)[0]}} {{item.create_time.split(/[T+]/)[1]}}</p>
                              </div>
                              <div>
                                  <p>{{item.cvn}}</p>
                              </div>
                              <div>
                                  <p>{{item.yta}}</p>
                              </div>
                              <div>
                                  <p>
                                    <span v-if="item.status == 0" class="checking">待发放</span>
                                    <span v-if="item.status == 10" class="passed">已发放</span>
                                    <span v-if="item.status == 20" class="refused">已驳回</span>
                                    <span v-if="item.status == 30" class="cancelled">已取消</span>
                                  </p>
                              </div>
                          </div>
                      </div>
                  </cube-scroll>
              </div>
          </div>
      </div>
    <div class="mask" v-show="showMask" @click="closeMask($event)" @touchmove.prevent>
      <div ref="maskContent">

        <transition name="fade">
          <div class="general-height pay-password" v-if="showPay">
            <h3 class="title">请在 <span style="color:#EB3257;"> {{countdown}}s </span> 内输入支付密码完成支付</h3>
            <div class="password-wrapper">
              <span><strong v-if="password.num1 >= 0"></strong></span>
              <span><strong v-if="password.num2 >= 0"></strong></span>
              <span><strong v-if="password.num3 >= 0"></strong></span>
              <span><strong v-if="password.num4 >= 0"></strong></span>
              <span><strong v-if="password.num5 >= 0"></strong></span>
              <span><strong v-if="password.num6 >= 0"></strong></span>
            </div>
            <!--<div class="forget-password" @click="getPwd">忘记密码?</div>-->
            <div class="number-group">
              <div class="number-btn">
                <div @click.stop.prevent="chooseNum(1)">1</div><div @click.stop.prevent="chooseNum(2)">2</div><div @click.stop.prevent="chooseNum(3)">3</div>
              </div>
              <div class="number-btn">
                <div @click.stop.prevent="chooseNum(4)">4</div><div @click.stop.prevent="chooseNum(5)">5</div><div @click.stop.prevent="chooseNum(6)">6</div>
              </div>
              <div class="number-btn">
                <div @click.stop.prevent="chooseNum(7)">7</div><div @click.stop.prevent="chooseNum(8)">8</div><div @click.stop.prevent="chooseNum(9)">9</div>
              </div>
              <div class="number-btn">
                <div class="no-num"></div><div @click.stop.prevent="chooseNum(0)">0</div><div class="no-num" @click.stop.prevent="deletePwd"><img src="~assets/images/del.png" /></div>
              </div>
            </div>
            <div class="pay-loading" v-show="showPayLoading">
              <div class="paying">
                <img src="~assets/images/paying.gif" />
                <span>正在支付</span>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>

</template>

<script>
  import md5 from 'js-md5';
  /*import 'common/js/gt';*/
  import {checkAgentPayPassword, todayPrice, ytaExchangeList, ytaExchange} from 'api/register'

  export default {
    components: {

    },
    data() {
      return {
        status: 0,
        ytaAddress: '--',
        currentTime: '--',
        newTime: '--',
        cvntPrice: '--',
        ytaPrice: '--',
        cvntNewPrice: '--',
        ytaNewPrice: '--',
        xNumber: '--',
        balance: '--',
        to_yta: '--',
        showExchange: false,
        countdown: 60,
        cvntNumber: '',
        willGet: 0.35,
        uid: '',
        token: '',
        offerList: null,
        /*offerList: [
          {date: '2020/02/03 18:00:03', cvn: 4223, yta: 422, status: 0 },
          {date: '2020/02/04 15:59:26', cvn: 4223, yta: 422, status: 1 },
          {date: '2020/02/05 11:12:32', cvn: 4223, yta: 422, status: 2 },
          {date: '2020/02/06 08:02:36', cvn: 4223, yta: 422, status: 3 },
          {date: '2020/02/07 15:36:55', cvn: 4223, yta: 422, status: 0 },
          {date: '2020/02/08 17:56:58', cvn: 4223, yta: 422, status: 1 },
          {date: '2020/02/09 12:21:23', cvn: 4223, yta: 422, status: 2 },
          {date: '2020/02/10 19:58:22', cvn: 4223, yta: 422, status: 3 },
          {date: '2020/02/11 13:11:26', cvn: 4223, yta: 422, status: 0 },
          {date: '2020/02/12 16:55:33', cvn: 4223, yta: 422, status: 1 }
        ],*/
        options: {
          click: true,
          tap: true,
          pullUpLoad: true
        },
        per: 20,
        page: 1,
        sw: true,
        showMask: false,
        showPay: false,
        showPayLoading: false,
        scene: 'yta',
        payPassword: '',
        payPwd: '',
        password: {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        }
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        let query = to.query;
        console.log(query);
        Object.assign(vm, query);
        vm.uid = query.uid;
        vm.token = query.token;
        vm.ytaAddress = query.address;
        vm.status = query.active;
        vm.setNormalStatus();
        vm.currentTime = vm.getCurrentTime();
        vm.getTodayPrice();
        vm.getYtaExchangeList();
        // vm.getTokenTradeList();
      })
    },
    mounted() {
      // this.getRegister_ini();
    },
    watch: {
      'password.num6': {
        handler(newVal, oldVal) {
          if (newVal >= 0 && this.payPwd.length == 6) {
            // console.log(this.payPwd);
            this.payPassword = md5(this.payPwd);
            // console.log(this.payPassword);
            setTimeout(() => {
              this.verifyPayPassword();
          }, 50);
          }
        },
        immediate: true,
        deep: true
      }
    },
    beforeDestroy() {
      let setIntervalCountdown = window['setIntervalCountdown'];
      clearInterval(setIntervalCountdown);
      window['setIntervalCountdown'] = null;
    },
    methods: {
      openExchangeModal() {
        if (this.status == 0) {
          this.showToast('请耐心等待 正在为您验证YTA地址！', 'warn');
          return;
        } else if (this.status == 2) {
          this.showToast('请更换成有效YTA地址！', 'warn');
          return;
        }
        this.showExchange = true;
        this.startSetIntervalCountdown();
        this.currentTime = this.getCurrentTime();
        this.getTodayPrice();
      },
      confirmExchange() {
        if (this.cvntNumber == '') {
          this.showToast('请先输入要兑换的CVNT数量！', 'warn');
          return;
        }
        if (Number(this.cvntNumber) <= 0) {
          this.showToast('输入的CVNT数量要大于0！', 'warn');
          return;
        }
        this.showExchange = false;
        this.showMask = true;
        this.showPay = true;
      },
      setNormalStatus() {
        this.showExchange = false;
        this.page = 1;
        this.options.pullUpLoad = true;
        this.sw = true;
        this.showMask = false;
        this.showPay = false;
        this.countdown = 60;
        this.cancelSetIntervalCountdown();
        this.cvntNumber = '';
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';

      },
      startSetIntervalCountdown() {
        let setIntervalCountdown = window['setIntervalCountdown'];
        if (setIntervalCountdown) {
          clearInterval(setIntervalCountdown);
          window['setIntervalCountdown'] = null;
        }
        window['setIntervalCountdown'] = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            this.cancelSetIntervalCountdown();
            this.countdown = 60;
            this.showExchange = false;
            this.showMask = false;
            this.showPay = false;
            /*关闭这个对话框时将当前已经输入的支付密码清空*/
            this.password = {
              num1: -1,
              num2: -1,
              num3: -1,
              num4: -1,
              num5: -1,
              num6: -1
            };
            this.payPwd = '';
            this.payPassword = '';
          }
        }, 1000);/*this.setIntervalCountdownTime*/
      },
      cancelSetIntervalCountdown() {
        let setIntervalCountdown = window['setIntervalCountdown'];
        clearInterval(setIntervalCountdown);
        window['setIntervalCountdown'] = null;
      },
      verifyPayPassword() {
        this.showPayLoading = true;
        checkAgentPayPassword({uid: '', password: this.payPassword,  scene: this.scene}).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
          this.u = data.data.u;
          setTimeout(() => {
            this.showPayLoading = false;
            this.showPay = false;
            this.finishExchange();
          }, 500);
          /*if (this.need_code == 1) {
            setTimeout(() => {
              this.showPayLoading = false;
            this.showPay = false;
            this.showIdCheck = true;
            /!*this.showMask = false;
            *!/
          }, 500);
          } else if (this.need_code == 0) {
            setTimeout(() => {
              this.showPayLoading = false;
            this.showPay = false;
            if (this.current == 1) {
              this.finishVerification();
            } else if (this.current == 2) {
              this.finishVerificationOutside();
            }
          }, 500);

          }*/
          /*setTimeout(() => {
            const toast = this.$createToast({
              time: 1000,
              txt: '支付密码验证成功',
              type: 'correct'
            });
            toast.show();
          }, 300);*/

        }
      }).catch((error) => {
          // console.log(error);
          if (error.status && error.status != 1) {
            setTimeout(() => {
              this.showToast(error.info, 'warn');
            }, 500)
          }
          setTimeout(() => {
            this.showPayLoading = false;
          }, 500)
      })
        /*验证支付密码成功或者失败后将当前已经输入的支付密码清空*/
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';
      },
      finishExchange() {
        if (this.isSubmiting) {
          return;
        }
        this.isSubmiting = true;
        ytaExchange(this.cvntNumber, this.u).then((data) => {
          // console.log(data);
          this.isSubmiting = false;
          this.showMask = false;
          this.cvntNumber = '';
          this.cancelSetIntervalCountdown();
          this.countdown = 60;
          this.page = 1;
          this.options.pullUpLoad = true;
          this.sw = true;
          this.getYtaExchangeList();

        }).catch((err) => {
            this.isSubmiting = false;
            this.showMask = false;
            this.showToast(err.info, 'warn');
        })

      },
      chooseNum(val) {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          this.password.num1 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 1) {
          this.password.num2 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 2) {
          this.password.num3 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 3) {
          this.password.num4 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 4) {
          this.password.num5 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 5) {
          this.password.num6 = val;
          this.payPwd += val;
        }
        // console.log(this.payPwd);
      },
      deletePwd() {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          return;
        } else if (this.payPwd.length == 1) {
          this.password.num1 = -1;
          this.payPwd = '';
        } else if (this.payPwd.length == 2) {
          this.password.num2 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 3) {
          this.password.num3 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 4) {
          this.password.num4 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 5) {
          this.password.num5 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 6) {
          this.password.num6 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        }
        // console.log(this.payPwd);
      },
      getYtaExchangeList() {
        ytaExchangeList(this.page, this.per).then((data) => {
          // console.log(data);

          if (data.data && data.data.length > 0) {
            this.offerList = data.data;
            // console.log(this.offerList[0].create_time.split(/[T+]/));
          } else if (!data.data || data.data == null || data.data.length == 0) {
            this.offerList = [];
          }


        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      closeMask(ev) {
        if (!this.$refs.maskContent.contains(ev.target)) {
          this.showMask = false;
          this.showPay = false;

          /*关闭弹框时将当前已经输入的支付密码清空*/
          this.password = {
            num1: -1,
            num2: -1,
            num3: -1,
            num4: -1,
            num5: -1,
            num6: -1
          };
          this.payPwd = '';
          this.payPassword = '';
          this.countdown = 60;
          this.cancelSetIntervalCountdown();

          /*if (this.payStatus == 2) {
            this.payStatus = 1;  //  payStatus:1,表示当前处于选择不同会员经销商，payStatus:2，表示当前处于支付弹框状态
            this.showPay = false;
          }*/
        }


      },
      onPullingUp() {
        this.page++;
        if (this.sw) {
          ytaExchangeList(this.page, this.per).then((data) => {
            if (data.data && data.data.length > 0) {
              this.offerList = this.offerList.concat(data.data);
              this.sw = true;
            }
            if (!data.data || data.data == null || data.data.length == 0) {
              this.sw = false;
              this.options.pullUpLoad = false;
              return;
            }

          }).catch((err) => {
              this.showToast(err.info, 'warn');
          })
        }
      },
      getCurrentTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        if (month < 10) {
          month = '0' + month;
        }
        if (day < 10) {
          day = '0' + day;
        }
        if (hour < 10) {
          hour = '0' + hour;
        }
        if (minute < 10) {
          minute = '0' + minute;
        }
        return year + '/' + month + '/' + day + ' ' + hour + ':' + minute;
      },
      putAllIn() {
        this.cvntNumber = Number(this.balance);
      },
      getTodayPrice() {
        todayPrice().then((data) => {
          console.log(data);
          if (data.status && data.status == 1) {
            this.cvntPrice = data.data.cvnt;
            this.ytaPrice = data.data.yta;
            this.xNumber = data.data.rate;
            this.balance = data.data.balance;
            this.to_yta = data.data.to_yta;
          }
        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      formatFlow(num) {
        let temp;
        if (num < 1024) {
          return temp = num + 'KB';
        } else if (num / 1024 < 1024) {
          return temp = (num / 1024).toFixed(1) + 'MB';
        } else if (num / 1024 / 1024 < 1024) {
          return temp = (num / 1024 / 1024).toFixed(1) + 'GB';
        } else if (num / 1024 / 1024 / 1024 < 1024) {
          return temp = (num / 1024 / 1024 / 1024).toFixed(1) + 'TB';
        }
      },




      goChangeAddress() {
        this.$router.push({path: '/ytaNewAddress', query: {
             uid: this.uid,
             token: this.token
          }});
      },

      cancelExchange() {
        this.showExchange = false;
        this.cancelSetIntervalCountdown();
        this.countdown = 60;
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      },
      toastTip (info) {
        this.$warn(info)
      }
    }
  }
</script>

<style lang="scss" scoped>


  .pag {
    background: #F5F5FB;
    height: 100%;
    font-size:30px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .top-info{
    height:443px;
    padding-top:58px;
    background:linear-gradient(-4deg,rgba(70,89,255,1),rgba(69,110,255,1));
  }
  .token-title {
    margin-left:40px;
    h4{
      font-size:40px;
      color:#fff;
      img{
        display:inline-block;
        /*vertical-align:middle;*/
        width:93px;
        height:30px;
      }
    }
    p{
      margin:32px 46px 24px 6px;
      word-break:break-word;
      font-size:28px;
      color:#fff;
    }
    h5{
      width:243px;
      height:40px;
      line-height:40px;
      border-radius:20px;
      font-size:23px;
      text-align:center;
      background:#fff;
      color:#4564FF;
    }
  }
  .today-price{
    /*height:328px;*/
    height:348px;
    padding:43px 30px 0;
    background:rgba(255,255,255,1);
    box-shadow:0 1px 2px 0 rgba(10,29,87,0.2);
    border-radius:14px;
    margin:-169px 30px 25px;
    h3{
      display:flex;
      margin-bottom:38px;
      justify-content:space-between;
      align-items:center;
      strong{
        font-size:36px;
        font-weight:bold;
        color:rgba(32,44,91,1);
      }
      span{
        font-size:24px;
        font-weight:500;
        color:rgba(113,118,140,1);
      }
    }
    h4{
      display:flex;
      margin-bottom:48px;
      justify-content:space-between;
      align-items:center;
      span{
        color:#202C5B;
        font-size:32px;
        line-height:1.3;
        em{
          color:#F59A23;
          font-style:normal;
        }
        i{
          color:#F59A23;
          font-style:normal;
        }
      }
    }
    h5{
      display:flex;
      justify-content:space-between;
      align-items:center;
      strong{
        position:relative;
        flex:1;
        height:70px;
        line-height:70px;
        color:#767B90;
        background:#ebebeb;
        border-radius:35px;
        text-align:center;
        margin-right:13px;
        img{
          position:absolute;
          top:-35px;
          left:102px;
          width:136px;
          height:54px;
        }
      }
      span{
        width:162px;
        height:75px;
        line-height:75px;
        text-align:center;
        border-radius:38px;
        background:#4564FF;
        color:#FAFAFA;
        font-size:24px;
      }
      .unable-btn{
        background:#f7f7f7;
        color:#a1a1a1;
      }
    }
  }
  .queue-title{
    display:flex;
    height:72px;
    /*line-height:90px;*/
    align-items:center;
    text-align:center;
    margin-bottom:14px;
    padding:0 30px;
    background:rgba(255,255,255,1);

    >div{
      font-weight:bold;
      font-size:24px;
    }
    color:#202C5B;
    >div:first-child{
      width:20.33333%;
    }
    >div:nth-child(2){
      width:35%;
    }
    >div:nth-child(3){
      width:22%;
    }
    >div:last-child{
      width:19.66666%;
      text-align:right;
    }

    /*h3{
      border:1px solid red;
    }*/
    .top{
      margin-bottom:6px;
    }
  }





  .scroll-area{
    width:100%;
    /*height:calc(100% - 618px);*/
    margin: 0 auto;
    .third-party{
      padding:24px 30px;
      height:83px;
      /*margin:0 30px 24px;*/
      font-weight:bold;
      font-size:34px;
      color:#202C5B;
      background:#fff;
      border-bottom:1px solid #F5F5F5;
      span{
        display:inline-block;
        width:6px;
        height:36px;
        margin-right:15px;
        background:rgba(43,117,243,1);
      }
    }
  }
  .code-content{
    /*height:calc(100vh - 796px);*/
    height:calc(100vh - 816px);
    /*height:100%;*/
    /*.third-party{
      padding-top:24px;
      margin:0 30px 24px;
      !*height:36px;
      line-height:36px;*!
      font-size:34px;
      color:#202C5B;
      span{
        display:inline-block;
        width:6px;
        height:36px;
        margin-right:15px;
        background:rgba(43,117,243,1);
      }
    }*/
    .no-result-wrapper{
      position:relative;
      height:100%;
      h2{
        /*padding:12px 0;*/
        position:absolute;
        width:250px;
        height:330px;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        text-align:center;
        color: #838899;
        font-size:26px;
        img{
          display:block;
          margin:0 auto 20px;
          width:250px;
          height:274px;
        }
      }
    }
    /*h2{
      padding:12px 0;
      text-align:center;
      color: #838899;
      font-size:28px;
    }*/
  }
  .scroll-list-wrap{
    height:100%;
    /*background:#fff;*/
  }
  .code-item{
    position:relative;
    /*width:690px;*/
    margin:1px auto 8px;
    /*padding: 0 0 14px;*/
    /*padding: 32px 0 32px;*/
    /*box-shadow:0 0 6px 0 rgba(102,102,102,0.3);*/
    /*border-radius:14px;*/
    background:#fff;
    .sold-out{
      position:absolute;
      top:0;
      right:0;
      width:106px;
      height:90px;
    }
    .title{
      display:flex;
      margin-bottom:14px;
      justify-content:space-between;
      align-items:center;
      padding:9px 15px 9px 15px;
      background:rgba(255,164,163,1);
      border-radius:10px 10px 0 0;
      span{
        /*width:270px;*/
        /*padding:2px 21px 3px 13px;*/
        /*background:rgba(23,62,143,0.4);*/
        /*border-radius:0 14px 14px 0;*/
        font-size:24px;
        color:rgba(255,255,255,1);
        white-space:nowrap;
      }
      i{
        flex:1;
        text-align:right;
        font-size:24px;
        color:rgba(255,255,255,1);
        font-style:normal;
        white-space:nowrap;
      }
      strong{
        display:inline-block;
        width:142px;
        padding:14px 0 13px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:10px 0 0 10px;
        font-size:26px;
        color:rgba(255,255,255,1);
        cursor:pointer;
      }
      .delete{
        background:rgba(156,172,208,1);
      }
    }
    .adjust-margin-bottom{
      margin-bottom:41px;
    }
    .detail{
      display:flex;
      /*margin-top:32px;*/
      justify-content:space-between;
      align-items:center;
      padding:27px 28px;
      >div{
        /*h3{
          margin-bottom:16px;
          font-size:24px;
          color:rgba(113,118,140,1);
        }*/
        p{
          font-size:26px;
          color:#202C5B;
          span{
            display:inline-block;
            width:70px;
            height:30px;
            line-height:30px;
            text-align:center;
            border-radius:4px;
            font-size:20px;
            font-weight:500;
            color:#fff;
            white-space:nowrap;
          }
          .checking{
            background:#F59A23;
          }
          .passed{
            background:rgba(16,213,146,1);
          }
          .refused{
            background:#FD4568;
          }
          .cancelled{
            background:#4564FF;
          }
        }
        /*strong{
          display:inline-block;
          padding:14px 23px;
          background:rgba(23,62,143,1);
          border-radius:10px 0 0 10px;
          font-size:26px;
          color:rgba(255,255,255,1);
          cursor:pointer;
        }*/
      }
      >div:first-child{
        flex:0.75;
        text-align:center;
      }
      >div:nth-child(2){
        flex:0.9;
        text-align:center;
      }
      >div:nth-child(3){
        flex:0.9;
        text-align:center;
      }
      >div:last-child{
         flex:0.6;
         padding-right:10px;
         text-align:right;
        /*margin-left:20px;*/
      }
    }
    .chip-detail{
      .chip-content{
        border-top:1px solid #F5F5F5;
        .chip-item{
          display:flex;
          /*margin-top:32px;*/
          justify-content:space-between;
          align-items:center;
          padding:21px 28px;
          font-size:22px;
          color:#666;
          >div:first-child{
             flex:0.9;
             text-align:center;
          }
          >div:nth-child(2){
             flex:0.8;
             text-align:center;
          }
          >div:nth-child(3){
             flex:0.8;
             text-align:center;
          }
          >div:nth-child(4){
             flex:0.8;
             text-align:center;
          }
          >div:nth-child(5){
             flex:0.8;
             text-align:center;
          }
          >div:last-child{
             flex:1;
             text-align:center;
             white-space:nowrap;
             /*margin-left:20px;*/
          }
        }
      }
    }
  }
  .adjust-opacity{
    background:rgba(255,255,255,0.5);
    .title{
      span{
        background:rgba(23,62,143,0.2);
        color:rgba(255,255,255,0.5);
      }
    }
    .detail{
      >div{
        h3{
          color:rgba(113,118,140,0.5);
        }
        p{
          color:rgba(32,44,91,0.5);
        }
        strong{
          background:rgba(23,62,143,0.5);
          color:rgba(255,255,255,0.5);
        }
      }
    }
  }

  .mask{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.5);

    .general-height{
      /*height: 500px;*/
      height: 67.46vh;
      background:rgba(255,255,255,1);
    }
    .title{
      position:relative;
      padding:29px 0 28px;
      font-size:34px;
      border-bottom:1px solid rgba(245,245,245,1);
      color:#202C5B;
      text-align:center;
      img{
        position:absolute;
        left:30px;
        top:27px;
        width:20px;
        height:34px;
      }
    }
    .number-group{
      position:absolute;
      z-index:9992;
      bottom:0;
      left:0;
      right:0;
      height:448px;
      >div:first-child{
        border-top:1px solid rgba(245,245,245,1);
      }
      .number-btn{
        display:flex;
        div{
          flex:1;
          height:111px;
          line-height:111px;
          font-size:50px;
          color:#333;
          text-align:center;
          border-bottom:1px solid rgba(245,245,245,1);
          border-right:1px solid rgba(245,245,245,1);
          -webkit-tap-highlight-color:rgba(0,0,0,0.15);
        }
        div:active{
          background:rgba(0,0,0,0.15);
        }
        div:last-child{
          border-right:none;
        }
        .no-num{
          background:#e3e7ee;
          img{
            width:44px;
            height:32px;
            display:block;
            margin:40px auto;
          }
        }
      }
    }
    .shopping-detail{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;

      .content{
        margin:97px 30px 0;
        h2{
          margin-bottom:66px;
          text-align:center;
          font-size:30px;
          color:#202C5B;
          font-weight:600;
          span{
            font-size:72px;
          }
        }
        p{
          display:flex;
          justify-content:space-between;
          font-size:28px;
          padding-bottom:29px;
          border-bottom:1px solid #ececec;
          span{
            color:#71768C;
          }
          strong{
            color:#202C5B;
          }
          input{
            width:250px;
            height:84px;
            text-indent:15px;
            background:rgba(248,248,248,1);
            border:1px solid rgba(23,62,143,1);
            border-radius:6px;
          }
        }
        p:last-child{
          margin-top:30px;
        }
        h4{
          line-height:1.45;
          font-size:28px;
          text-align:center;
          color:#71768C;
          span{
            color:#EB3257;
          }
        }
      }
      .confirm-content{
        margin:32px 30px 0;
        h1{
          margin-bottom:47px;
          font-size:28px;
          color:#71768C;
          text-align:center;
          span{
            color:#EB3257;
          }
        }
        h3{
          margin-bottom:38px;
          font-size:28px;
          color:#202C5B;
          text-align:center;
        }
        .number{
          margin-top:30px;
        }
        .buy-back{
          margin-bottom:52px;
          align-items:center;
        }
      }
      .official-content{
        p{
          padding-bottom:52px;
          align-items:center;
          border-bottom:none;
        }
      }
      .result{
        /*margin-top:97px;*/
        margin-top:45px;
        text-align:center;
        img{
          width:80px;
          height:80px;
          margin-bottom:41px;
        }
        h3{
          margin-bottom:60px;
          font-size:28px;
          color:#202C5B;
        }
        p{
          font-size:28px;
          color:#71768C;
        }
      }
      .pay-btn{
        position:absolute;
        bottom:30px;
        height:84px;
        line-height:84px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:8px;
        color:#fff;
        width:calc(100% - 60px);
        margin:0 30px;
        font-size:34px;
      }
    }
    .pay-password{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .password-wrapper{
        display:flex;
        margin:43px 30px 0;
        height:88px;
        line-height:88px;
        border:1px solid rgba(209,209,209,1);
        border-radius:10px;
        span{
          flex:1;
          text-align:center;
          border-right:1px solid rgba(209,209,209,1);
          strong{
            display:block;
            width:20px;
            height:20px;
            border-radius:50%;
            background:#333;
            margin:34px auto;
          }
        }
        span:last-child{
          border-right:none;
        }
      }
      .forget-password{
        color:#1253FC;
        width:25%;
        padding:12px 0;
        margin:12px auto 0;
        text-align:center;
        font-size:28px;
      }
      .pay-loading{
        position:absolute;
        z-index:9993;
        bottom:0;
        left:0;
        right:0;
        height:calc(100% - 70px);
        background:#fff;
        .paying{
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%, -50%);
          text-align:center;
          font-size:30px;
          color:#4B74E8;
          img{
            display:block;
            width:40px;
            height:40px;
            margin:0 auto 15px;
          }
        }
      }

    }
    .id-check{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .check-title{
        position:relative;
        img{
          position:absolute;
          left:30px;
          top:29px;
          width:34px;
          height:34px;
        }
      }
      .check-content{
        margin-top:32px;
        padding:0 30px;
        p{
          text-align:center;
          color:#202C5B;
          font-size:26px;
          line-height:1.5;
        }
        .sms-input{
          height:84px;
          line-height:84px;
          margin-top:28px;
          input{
            display:inline-block;
            height:84px;
            line-height:84px;
            width:59.9999%;
            text-indent:22px;
            font-size:30px;
            border-radius:10px 0 0 10px;
            border:1px solid rgba(227,227,227,1);
            border-right:none;
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
          span{
            display:inline-block;
            width:39.9999%;
            height:84px;
            line-height:84px;
            border-radius:0 10px 10px 0;
            vertical-align:top;
            background:#D1D1D1;
            color:#fff;
            font-size:30px;
            text-align:center;
            /*border:1px solid rgba(227,227,227,1);
            border-left:none;*/
          }
        }
        .finish-btn{
          height:84px;
          line-height:84px;
          margin-top:32px;
          text-align:center;
          color:#fff;
          font-size:34px;
          border-radius:8px;
          background:rgba(23,62,143,0.5);
        }
        .success{
          background:rgba(23,62,143,1);
        }
      }
    }
  }

  .active-ct {
    position:relative;
    width:84.53333vw;
    /*height:auto;*/
    margin:0 auto;
    border-radius:14px;
    background:#fff;
    .content{
      /*background:#1E213C;*/
      /*margin:0 auto;*/

      /*width:92vw;*/

      /*height:105.33vw;*/
      padding:43px 40px 0;
      margin-bottom:22px;
      -webkit-overflow-scrolling: touch;
      /*overflow:auto;*/
      h2{
        margin-bottom:28px;
        color:#202C5B;
        text-align:center;
        font-size:32px;
      }
      p{
        padding:0 16px;
        color:#202C5B;
        font-size:30px;
        line-height:1.75;
      }
      .pledge{
        padding:0 45px;
      }
      h3{
        line-height:1.75;
        margin-top:-25px;
        margin-bottom:20px;
        /*border-top:1px solid #F1F2F7;*/
        padding-top:30px;
        padding-left:17px;
        font-size:30px;
        color:#71768C;
        span{
          color:#EB3257;
        }
      }
      h1{
        margin-bottom:25px;
        font-size:30px;
        font-weight:600;
        color:#202C5B;
      }
      .yta-modal{
        h2{
          display:flex;
          margin-bottom:40px;
          justify-content:space-between;
          align-items:center;
          font-size:24px;
          color:#71768C;
          strong{
            em{
              font-style:normal;
              color:#FD4568;
            }
          }
        }
        h4{
          display:flex;
          justify-content:space-between;
          align-items:center;
          border-bottom:1px solid #f5f5f5;
          padding-bottom:14px;
          font-size:32px;
          color:#202C5B;
          span{
            line-height:1.3;
            font-weight:bold;
            em{
              font-style:normal;
              color:#F59A23;
            }
            i{
              font-style:normal;
              color:#F59A23;
            }
          }
        }
        h5{
          display:flex;
          justify-content:space-between;
          align-items:center;
          font-size:26px;
          color:#71768C;
          span{
            em{
              font-style:normal;
              color:#FD4568;
            }
          }
        }
        p{
          position:relative;
          width:100%;
          height:70px;
          line-height:70px;
          margin:40px 0 30px;
          background:#EBEBEB;
          color:#202C5B;
          font-size:27px;
          box-shadow:0 1px 2px 0 rgba(10,29,87,0.2);
          border-radius:35px;
          text-align:center;
          >img{
            position:absolute;
            width:136px;
            height:54px;
            top:-35px;
            left:170px;
          }
        }
        h6{
          display:flex;
          justify-content:space-between;
          align-items:center;
          margin:32px 0 14px;
          strong{
            display:inline-block;
            width:103px;
            height:25px;
            line-height:25px;
            text-align:center;
            margin-left:19px;
            font-size:26px;
            white-space:nowrap;
            color:#F59A23;
          }
          span{
            flex:1;
            position:relative;
            input{
              width:100%;
              height:70px;
              background:#d5d2d2;
              border-radius:35px;
              color:#767B90;
              text-indent:35px;
              /*text-align:center;*/
              &::-webkit-input-placeholder{
                color:#A9ADBC;
                font-size:26px;
              }
            }
            em{
              position:absolute;
              top:22px;
              right:15px;
              color:#202C5B;
              font-style:normal;
              font-size:26px;
            }
          }
        }
        h1{
          margin-bottom:47px;
          text-align:center;
          font-size:24px;
          font-weight:400;
          color:rgba(253,69,104,1);
        }
      }
      /*img{
        display:block;
        width:100%;
        min-height:500px;
        height:auto;
        border-radius:6px;
      }*/
    }
    .img-explain{
      /*height:80vh;*/
      height:70vh;
      img{
        width:100%;
      }
    }
    .close{
      /*position:absolute;*/
      z-index:9999;
      width:100%;
      height:108px;
      line-height:108px;
      border-top:1px solid #D0D4E4;
      /*bottom:160px;*/
      /*margin-top:-390px;*/
      cursor:pointer;
      p{
        font-size:30px;
        color:#1253FC;
        text-align:center;
        /*img{
          width:42px;
          height:42px;
          margin-right:20px;
          vertical-align:middle;
        }*/
      }
      /*>img{
        width:70.2%;
      }*/
    }
    .upgrade-member {

      margin: 0 auto 35px;
      width: 634px;
      /*height: 481px;*/
      /*height: 380px;*/
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      background:#fff;
      border-radius:14px;
      h2{
        margin:92px auto 36px;
        font-size:32px;
        text-align:center;
        color:#202C5B;
      }

      h3{
        margin:0 auto 80px;
        text-align:center;
        font-size:30px;
        line-height:1.5;
        color:#202C5B;
      }
      h4{
        font-size:13px;
        text-align:center;
      }
      .submit-btn{
        height:108px;
        line-height:108px;
        width:100%;
        font-size:0;
        margin:15px auto 0;
        border-top:1px solid #D0D4E4;
        text-align:center;
        span{
          display:inline-block;
          width:49.99999%;
          border-radius:5px;
          font-size:30px;
          color:#1253FC;
        }
        span:last-child{
          color:#1253FC;
          border-left:1px solid #D0D4E4;
          /*margin-right:10px;*/
        }
      }
    }
    .submit-btn{
      height:108px;
      line-height:108px;
      width:100%;
      font-size:0;
      margin:15px auto 0;
      border-top:1px solid #D0D4E4;
      text-align:center;
      span{
        display:inline-block;
        width:49.99999%;
        border-radius:5px;
        font-size:30px;
        color:#1253FC;
      }
      span:last-child{
        color:#1253FC;
        border-left:1px solid #D0D4E4;
        /*margin-right:10px;*/
      }
    }
  }


  .fixed-position{
    position:fixed;
  }
  .static-position{
    position:absolute;
  }

  .fade-enter-active, .fade-leave-active{
    /*opacity:1;
    background: rgba(7, 17, 27, 0.8);*/
    transition: all 0.5s;
    transform:translate(0, 0);
  }
  .fade-enter, .fade-leave-active{
    /*opacity:0;
    background:rgba(7, 17, 27, 0);*/
    transform: translate(0, 100%);
  }
  input::-webkit-input-placeholder{
    color: #B7C3D1;
    font-size:26px;
  }
</style>
<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    max-height:6em;
    line-height:40px;
  }
  .cube-toast.cube-popup {
    z-index: 10000!important;
  }
</style>











